<template>
  <div class="main">
    <div class="main_content">
      <div class="main_content_1">二维码的内容：</div>
      <input v-model="content"/>
    </div>
    <button @click="createQrCode" class="main_create_qr_code">生成二维码</button>
    <img :src="url" alt="">
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import {ref} from "vue";

//扫描二维码后出现的内容
const content = ref<string>("")
//后端返回base64格式的url地址
const url = ref<string>("")

//生成二维码
const createQrCode = () => {
  axios.get("http://localhost:5002/qrCode/createQrCode/"+content.value).then((res) => {
    url.value = res.data
    content.value = ""
  })
}
</script>
<style lang="less" scoped>
.main {
  .main_content {
    display: flex;

    .main_content_1 {
      width: 120px;
    }
  }

  .main_create_qr_code {
    margin-top: 10px;
  }
}
</style>